<template>
	<view class="goods-action">
		<view class="goods-action-container">
			<van-goods-action>
			  <van-goods-action-icon icon="wap-home-o" text="首页" url="/pages/index/index" link-type="switchTab" />
			  <van-goods-action-icon
				  :icon="info.userCollect ? 'like' : 'like-o'"
				  text="收藏"
				  :class="{ 'collect-on': info.userCollect }"
				  @click="$emit(info.userCollect ? 'cancel-collect' : 'collect')"/>
			  <van-goods-action-icon icon="cart-o" text="购物车" :info="info.cartNum"  @click="$emit('cart')"/>
			  <van-goods-action-button text="加入购物车" type="warning" @click="$emit('add-cart')" />
			  <van-goods-action-button text="立即购买" />
			</van-goods-action>
		</view>
	</view>
</template>

<script>
	import VanGoodsAction from '@/wxcomponents/vant/goods-action/index'
	import VanGoodsActionButton from '@/wxcomponents/vant/goods-action-button/index'
	import VanGoodsActionIcon from '@/wxcomponents/vant/goods-action-icon/index'
	
	export default {
		props: {
			info: {
				type: Object,
				default: {}
			}
		},
		components: {
			VanGoodsAction,
			VanGoodsActionButton,
			VanGoodsActionIcon
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.goods-action {
		&-container {
			.collect-on {
				::v-deep van-button {
					text, van-icon {
						color: #fc4141;
					}
				}
			}
		}
	}
</style>
